<template>
	<div class="step-1">
		<div class="all_paper creat_paper active" @click="checkItem(1)">
			<div class="title">
				<img v-if="checkNum == 2" src="../../../assets/images/radio-checked.png"/>
				<img v-if="checkNum == 1" src="../../../assets/images/radio-checked-check.png"/>
				创建新试卷
			</div>
			<div class="else-list" v-if="checkNum == 1">
				<p>
					试卷名称: <el-input v-model="pageName" style="width: 200px;margin-right: 10px;margin-left: 20px;" placeholder="请输入试卷名称"></el-input><span style="color: red;">*</span>
				</p>
				<p>
					试卷分类:<el-input
							style="margin-left: 20px;width: 200px;"
			      			class="inline-input"
					        v-model="pageType"
					        placeholder="请添加或选择试题分类"
					    ></el-input>
					<span style="color: red;">*</span>
				</p>
				<p>
					<el-button type="primary" @click.native="nextRoute">下一步</el-button>
				</p>
			</div>
		</div>
		<!--<div :class="['all_paper','check_paper',checkNum==2?'active':'' ]" @click="checkItem(2)">
			<div class="title">
				<img v-if="checkNum == 1" src="../../../assets/images/radio-checked.png"/>
				<img v-if="checkNum == 2" src="../../../assets/images/radio-checked-check.png"/>
				从试卷库中选择一张试卷
			</div>
			<div class="else-list" v-if="checkNum == 2">
				<p style="margin: 20px 0 20px 10px;">
					<el-button round size="small" @click="checkPaper">选择试卷</el-button>
				</p>
				<p>
					<el-button type="primary">下一步</el-button>
				</p>
			</div>
		</div>-->
		
		<el-dialog
		  title="选择试卷"
		  :visible.sync="checkPaperVisible"
		  width="1070px"
		  :before-close="handleClose">
		  <div class="search">
		  	<div >
		  		<div class="search_list">
			  		试卷名称：<el-input style="width: 200px;margin-right: 10px;" placeholder="请输入试卷名称"></el-input>
			  	</div>
			  	<div class="search_list">
			  		试卷总分：<el-input style="width: 200px;margin-right: 10px;" placeholder="请输入试卷名称"></el-input>
			  	</div>
			  	<div class="search_list">
			  		试卷分类：<el-autocomplete
				      			class="inline-input"
						        v-model="pageType"
						        :fetch-suggestions="querySearch"
						        placeholder="请添加或选择试题分类"
						        @select="handleSelect"
						    ></el-autocomplete>
			  	</div>
		  	</div>
		  	<div style="margin-top: 10px;">
		  		考试时间：
		  		<div class="search_list">
		  			<el-date-picker
				      v-model="value7"
				      type="datetimerange"
				      align="right"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期"
				      :default-time="['12:00:00', '08:00:00']">
				    </el-date-picker>
		  		</div>
		  	</div>
		  </div>
		  <div class="tab_content" style="padding-top: 20px;">
		  	<el-table
			    ref="singleTable"
			    :data="tableData"
			    highlight-current-row
			    @current-change="handleCurrentChange"
			    style="width: 100%">
			    <el-table-column
			      type="index"
			      width="50">
			    </el-table-column>
			    <el-table-column
			      property="date"
			      label="日期"
			      width="120">
			    </el-table-column>
			    <el-table-column
			      property="name"
			      label="姓名"
			      width="120">
			    </el-table-column>
			    <el-table-column
			      property="address"
			      label="地址">
			    </el-table-column>
			  </el-table>
			  
			  <div class="pagination" style="margin-top: 30px;overflow: hidden;width: 100%;">
			  	<el-pagination
			  	  style="float: right;"
				  background
				  layout="prev, pager, next"
				  :total="50">
				</el-pagination>
			  </div>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="checkPaperVisible = false">关 闭</el-button>
		    <el-button type="primary" @click="checkPaperVisible = false">保 存</el-button>
		  </span>
		</el-dialog>

	</div>
</template>

<script>
  //import { fileUpload,Login} from '../assets/util/api.js'
  export default {
    data() {
      return {
      	checkNum:1,
      	checkPaperVisible:false,
      	tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          pageName:"",
          pageType:"",
      };
    },
    mounted(){
      this.questionType = this.inStorage("get","questionType")
    },
    methods: {
     checkItem(idx){
     	this.checkNum = idx;
     },
     querySearch(queryString, cb) {
        var restaurants = this.restaurants;
//      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
//      cb(results);
      },
      handleSelect(item) {
        console.log(item);
      },
       loadAll() {
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
          { "value": "枪会山", "address": "上海市普陀区棕榈路" },
          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
          { "value": "钱记", "address": "上海市长宁区天山西路" },
          { "value": "壹杯加", "address": "上海市长宁区通协路" },
          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
          { "value": "浏阳蒸菜", "address": "天山西路430号" },
          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
          { "value": "阳阳麻辣烫", "address": "天山西路389号" },
          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
        ];},
        checkPaper(){
        	this.checkPaperVisible = true;
        },
        handleClose(done) {
	        this.$confirm('确认关闭？')
	          .then(_ => {
	            done();
	          })
	          .catch(_ => {});
	    },
	    nextRoute(){
	    	if(!this.pageName || !this.pageType){
	    		this.$message.error("生成试卷名以及试卷类型不可为空！");
	    	}else{
	    		let pageItem = {
	    			pageName:this.pageName,
	    			pageType:this.pageType
	    		}
	    		this.inStorage("set","pageItem",pageItem)
	    		this.RouterTo(this,'/itemBank/addPaper-step2',{step:2});
	    	}
	    }
    }
  }
 
</script>
<style lang="scss" scoped>
  .step-1{
  	margin-top: 80px;
  	display: flex;
  	flex-direction: column;
  	justify-content: flex-start;
  	align-items: center;
  }
  .all_paper.active{
  	padding:35px 54px;
  	font-size: 14px;
    color: #333333;
    border: 1px solid #DEDEDE;
    padding: 35px 54px;
    border-radius: 8px;
  }
  .all_paper{
  	    font-size: 14px;
	    color: #333333;
	    border: 1px solid #DEDEDE;
	    padding: 15px 54px;
	    width: 80%;
	    margin: 15px auto 20px;
	    border-radius: 8px;
	    .title{
	    	margin-left: -30px;
	    	img{
	    		width: 20px;
	    		height: 20px;
	    		margin-right: 6px;
	    		vertical-align: middle;
	    	}
	    }
  }
  .search{
  	padding-bottom:30px;
  	box-sizing: border-box;
  	border-bottom:5px solid #409EFF;
  }
  .search_list{
  	display: inline-block;
  }
  .dialog-footer{
  	display: flex;
  	justify-content: center;
  	align-items: center;
  }
</style>

